<template>
	<base-page title="添加活动商品" backgroundColor="white">
		<view class="flex-col w-full">
			<view class="mt-16 mx-16 flex-shrink">
				<text class="fs-16">请选择活动商品</text>
			</view>
			<search-bar v-model="queryParams.goodsName" placeholder="搜商品" @search="doSearch" @clean="doClean" />
			<view class="flex-1 flex ml-16">
				<scroll-view scroll-y>
					<view v-for="(item,i) in currentGoodsList" :key="i" class="mr-16 mb-16">
						<view class="flex mb-6">
							<view class="flex flex-shrink">
								<view class="flex item-center">
									<image v-if="hasChecked(item)" class="size-16 mr-4" src="@/static/svg/activity/icon-radio-check-blue.svg" @click="noCheck(item)"></image>
									<image v-else class="size-16 mr-4" src="@/static/svg/activity/icon-radio-default.svg" @click="check(item)"></image>
									<image class="radius-12 mr-12" style="width:64px;height:64px;" :src="item.goodsImgs"></image>
								</view>
							</view>
							<view class="flex-1 flex-col justify-between">
								<view class="mb-4"><text class="text-color-regular fs-14 font-semibold">{{item.goodsName}}</text></view>
								<view class="flex justify-between item-center">
									<view class="mr-10">
										<text class="color-primary fs-14 font-semibold"><text class="fs-11">¥</text>{{item.goodsPrice}}</text>
									</view>
									<text class="fs-10 text-color-hint font-normal">可用库存:{{item.remainStock}}</text>
								</view>
							</view>
						</view>
						<view class="flex justify-end">
							<number-input-box v-if="hasChecked(item)" :value="item.goodsNum || 1" :min="1" :max="item.remainStock" @change="onSelectChange(item, $event)"></number-input-box>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<template #footer>
			<view class="m-12 flex flex-shrink">
				<button class="flex-1 flex center radius-8 h-46 fs-16 font-normal leading-22 bg-white uni-border text-color-hint mr-12" @click="goBack">取消</button>
				<button class="flex-1 flex center radius-8 h-46 fs-16 font-normal leading-22 bg-primary text-white" @click="submit">确认</button>
			</view>
		</template>
	</base-page>
</template>

<script setup name="SearchAddGoods">
	import { onLoad } from '@dcloudio/uni-app'
	import {
		ref,
		unref,
		toRaw,
		getCurrentInstance,
	} from 'vue'
	import {
		getGoodsActiveApi
	} from '@/api/activity.js'
	import { usePublishStore } from '@/stores/modules/publish.js'
	
	const publishStore = usePublishStore()
	
	const instance = getCurrentInstance()
	
	const goBack = () => uni.navigateBack()
	
	const doSearch = () => {
		queryParams.value.pageNum = 1
		getGoodsActive()
	}
	
	const doClean = () => {
		queryParams.value.goodsName = ''
		currentGoodsList.value = []
	}
	
	const selectedList = ref([])
	
	// 勾选
	const check = (item) => {
		const obj = selectedList.value.find(it => it.id === item.id)
		if (!obj) {
			item.goodsNum = 1
			selectedList.value.push(item)
		}
	}
	
	// 取消勾选
	const noCheck = (item) => {
		selectedList.value = selectedList.value.filter(it => it.id !== item.id)
		item.goodsNum = 0
	}
	
	// 是否添加过
	const hasChecked = (item) => selectedList.value.some(it => it.id === item.id)
	
	const onSelectChange = (item, val) => {
		const obj = selectedList.value.find(it => it.id === item.id)
		if (obj) {
			obj.goodsNum = val
		}
		item.goodsNum = val
	}
	
	const submit = () => {
		if (selectedList.value.length) {
			const eventChannel = instance.ctx.getOpenerEventChannel()
			eventChannel.emit('onGoodsSelect', selectedList.value.map(it => toRaw({...it})))
			uni.navigateBack()
		} else {
			uni.showToast({
				icon: 'none',
				title: '请选择要添加的活动商品'
			})
		}
	}
	
	const queryParams = ref({
		goodsName: '',
		pageNum: 1,
		pageSize: 20,
	})
	const currentGoodsList = ref([])
	const getGoodsActive = () => {
		getGoodsActiveApi(unref(queryParams)).then(res => {
			currentGoodsList.value = res.list || []
			for (var i = 0; i < selectedList.value.length; i++) {
				const obj = selectedList.value[i]
				for (var j = 0; j < currentGoodsList.value.length; j++) {
					const element = currentGoodsList.value[j]
					if (obj.id === element.id) {
						element.goodsNum = obj.goodsNum
					}
				}
			}
		})
	}
	
	onLoad(() => {
		const eventChannel = instance.ctx.getOpenerEventChannel()
		eventChannel.on('acceptDataFromOpenerPage', (data) => {
			selectedList.value = data.selectedList || []
		})
	})
</script>
